<template>
  <div class="center">
    <div class="center-top">
      <div class="centerlist">
        <a href="#">
          <p>217021468</p>
          <span>累计确诊</span>
        </a>
        <a href="#">
          <p>46987153</p>
          <span>现存确诊</span>
        </a>
        <a href="#">
          <p>165524088</p>
          <span>累计治愈</span>
        </a>
        <a href="#">
          <p>4510227</p>
          <span>累计死亡</span>
        </a>
      </div>
    </div>
    <!-- 地图 -->
    <div class="ditu">
      <div class="list">
        <p class="color" tabindex="1">累计确诊</p>
        <p tabindex="1">现存确诊</p>
      </div>
      <div class="box">
        <!-- 箭头 -->
        <img class="img1" src="../img/jt.c268bab5.png" alt="" />
        <!-- 地球 -->
        <img class="img2" src="../img/map.bab2b509.png" alt="" />
        <!-- 网 -->
        <img class="img3" src="../img/lbx.0dea0f97.png" alt="" />
        <div id="map"></div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";

const chinaJson = require("@/assets/china");
const worldJson = require("@/assets/world");
export default {
  data() {
    return {
      list: [],
    };
  },
  mounted() {
    this.mapp();
  },
  methods: {
    mapp() {
      var chartDom = document.getElementById("map");
      var myChart = echarts.init(chartDom);
      var option;

      var data = [
        { name: "卢旺达", value: 56.99 },
        { name: "布隆迪", value: 20.27 },
        { name: "尼泊尔", value: 40.01 },
        { name: "乌干达", value: 40.37 },
        { name: "老挝", value: 71.28 },
        { name: "埃塞俄比亚", value: 19.96 },
        { name: "马达加斯加", value: 21.82 },
        { name: "海地", value: 33.11 },
        { name: "也门", value: 51.51 },
        { name: "肯尼亚", value: 33.33 },
        { name: "菲律宾", value: 68.82 },
        { name: "索马里", value: 0 },
        { name: "阿富汗", value: 15.94 },
        { name: "巴基斯坦", value: 28.16 },
        { name: "朝鲜", value: 0 },
        { name: "印度", value: 33.2 },
        { name: "厄立特里亚", value: 10.59 },
        { name: "哥伦比亚", value: 143.51 },
        { name: "哥伦比亚", value: 143.51 },
        { name: "巴布亚新几内亚", value: 32.39 },
        { name: "布基纳法索", value: 12.84 },
        { name: "马拉维", value: 9.97 },
        { name: "埃及", value: 53.39 },
        { name: "塞拉利昂", value: 8.72 },
        { name: "尼加拉瓜", value: 29.14 },
        { name: "坦桑尼亚", value: 13.09 },
        { name: "尼日利亚", value: 43.94 },
        { name: "尼日尔", value: 6.35 },
        { name: "毛里塔尼亚", value: 21.69 },
        { name: "喀麦隆", value: 19.69 },
        { name: "新加坡", value: 788.07 },
        { name: "缅甸", value: 15.48 },
        { name: "印尼", value: 49.68 },
        { name: "贝宁", value: 11.62 },
        { name: "摩洛哥", value: 44.39 },
        { name: "马里", value: 10.68 },
        { name: "哥斯达黎加", value: 124.23 },
        { name: "萨尔瓦多", value: 53.55 },
        { name: "厄瓜多尔", value: 69.56 },
        { name: "泰国", value: 75.76 },
        { name: "斯里兰卡", value: 40.52 },
        { name: "多米尼加", value: 77.08 },
        { name: "韩国", value: 312.71 },
        { name: "刚果民主共和国", value: 4.37 },
        { name: "越南", value: 18.4 },
        { name: "几内亚", value: 5.92 },
        { name: "危地马拉", value: 37.58 },
        { name: "利比里亚", value: 4.31 },
        { name: "多哥", value: 6.35 },
        { name: "秘鲁", value: 64.13 },
        { name: "毛里求斯", value: 100.04 },
        { name: "莫桑比克", value: 5.08 },
        { name: "阿尔及利亚", value: 53.74 },
        { name: "柬埔寨", value: 9.37 },
        { name: "斯威士兰", value: 45.26 },
        { name: "乍得", value: 10.66 },
        { name: "塞内加尔", value: 11.74 },
        { name: "津巴布韦", value: 7.85 },
        { name: "黎巴嫩", value: 95.02 },
        { name: "洪都拉斯", value: 22.47 },
        { name: "伊拉克", value: 47.76 },
        { name: "科特迪瓦", value: 13.1 },
        { name: "孟加拉国", value: 7.25 },
        { name: "赞比亚", value: 13.51 },
        { name: "巴拿马", value: 72.29 },
        { name: "中非共和国", value: 3.97 },
        { name: "突尼斯", value: 36.71 },
        { name: "加纳", value: 11.49 },
        { name: "斐济", value: 31.41 },
        { name: "安哥拉", value: 32.99 },
        { name: "冈比亚", value: 4.76 },
        { name: "中国", value: 37.89 },
        { name: "刚果共和国", value: 24.02 },
        { name: "古巴", value: 45.95 },
        { name: "苏丹", value: 14.59 },
        { name: "伊朗", value: 49.76 },
        { name: "委内瑞拉", value: 106.43 },
        { name: "土耳其", value: 73.85 },
        { name: "牙买加", value: 32.98 },
        { name: "叙利亚", value: 0 },
        { name: "玻利维亚", value: 13.1 },
        { name: "巴西", value: 68.18 },
        { name: "阿联酋", value: 204.32 },
        { name: "智利", value: 70.17 },
        { name: "马来西亚", value: 47.23 },
        { name: "苏里南", value: 43.68 },
        { name: "前南马其顿", value: 23.52 },
        { name: "加蓬", value: 47.86 },
        { name: "日本", value: 224.41 },
        { name: "阿尔巴尼亚", value: 19.88 },
        { name: "墨西哥", value: 42.05 },
        { name: "波多黎各", value: 122.98 },
        { name: "以色列", value: 137.51 },
        { name: "西班牙", value: 139 },
        { name: "特立尼达和多巴哥", value: 73.85 },
        { name: "卡塔尔", value: 312.81 },
        { name: "克罗地亚", value: 19.07 },
        { name: "乌拉圭", value: 50.36 },
        { name: "塔吉克斯坦", value: 3.13 },
        { name: "巴林", value: 85.71 },
        { name: "巴拉圭", value: 13.55 },
        { name: "沙特阿拉伯", value: 75.26 },
        { name: "瑞士", value: 290.61 },
        { name: "蒙古", value: 10.27 },
        { name: "科威特", value: 144.27 },
        { name: "圭亚那", value: 11.3 },
        { name: "英国", value: 142.92 },
        { name: "塞浦路斯", value: 85.21 },
        { name: "阿根廷", value: 36.4 },
        { name: "爱尔兰", value: 170.27 },
        { name: "意大利", value: 122.84 },
        { name: "南非", value: 25.19 },
        { name: "荷兰", value: 167.29 },
        { name: "黑山共和国", value: 20.69 },
        { name: "利比亚", value: 35.61 },
        { name: "亚美尼亚", value: 9.26 },
        { name: "斯洛文尼亚", value: 68.59 },
        { name: "波兰", value: 35.51 },
        { name: "希腊", value: 74.84 },
        { name: "纳米比亚", value: 14.1 },
        { name: "德国", value: 113.16 },
        { name: "阿曼", value: 53.31 },
        { name: "格鲁吉亚", value: 7.76 },
        { name: "卢森堡", value: 261.76 },
        { name: "葡萄牙", value: 56.74 },
        { name: "阿塞拜疆", value: 14.7 },
        { name: "新喀里多尼亚", value: 0 },
        { name: "吉尔吉斯斯坦", value: 2.18 },
        { name: "新西兰", value: 81.44 },
        { name: "乌兹别克斯坦", value: 3.28 },
        { name: "塞尔维亚", value: 12.33 },
        { name: "法国", value: 91.28 },
        { name: "奥地利", value: 102.69 },
        { name: "捷克共和国", value: 39.81 },
        { name: "斯洛伐克", value: 33.15 },
        { name: "拉脱维亚", value: 21.6 },
        { name: "挪威", value: 164.82 },
        { name: "土库曼斯坦", value: 8.36 },
        { name: "比利时", value: 81.96 },
        { name: "丹麦", value: 99.84 },
        { name: "匈牙利", value: 22.46 },
        { name: "伯利兹", value: 6.99 },
        { name: "瑞典", value: 82.78 },
        { name: "博茨瓦纳", value: 9.84 },
        { name: "罗马尼亚", value: 12.26 },
        { name: "俄罗斯", value: 15.51 },
        { name: "澳大利亚", value: 74.66 },
        { name: "加拿大", value: 67.79 },
        { name: "保加利亚", value: 9.73 },
        { name: "哈萨克斯坦", value: 12.24 },
        { name: "立陶宛", value: 16.14 },
        { name: "爱沙尼亚", value: 19.49 },
        { name: "白俄罗斯", value: 7.67 },
        { name: "美国", value: 63.52 },
        { name: "美国", value: 63.52 },
        { name: "文莱", value: 45.69 },
        { name: "摩尔多瓦", value: 2.08 },
        { name: "巴哈马", value: 26.37 },
        { name: "芬兰", value: 55.07 },
        { name: "乌克兰", value: 3.33 },
        { name: "北马里亚纳", value: 0 },

        //{name:'南苏丹',value:0},
        //{name:'索马里兰',value:0},
        //{name:'黑山',value:0},
        //{name:'科索沃',value:0},
        //{name:'塞尔维亚',value:0},
      ];

      var nameMap = {
        Afghanistan: "阿富汗",
        Albania: "阿尔巴尼亚",
        Algeria: "阿尔及利亚",
        Andorra: "安道尔",
        Angola: "安哥拉",
        Antarctica: "南极洲",
        "Antigua and Barbuda": "安提瓜和巴布达",
        Argentina: "阿根廷",
        Armenia: "亚美尼亚",
        Australia: "澳大利亚",
        Austria: "奥地利",
        Azerbaijan: "阿塞拜疆",
        "The Bahamas": "巴哈马",
        Bahrain: "巴林",
        Bangladesh: "孟加拉国",
        Barbados: "巴巴多斯",
        Belarus: "白俄罗斯",
        Belgium: "比利时",
        Belize: "伯利兹",
        Benin: "贝宁",
        Bermuda: "百慕大",
        Bhutan: "不丹",
        Bolivia: "玻利维亚",
        "Bosnia and Herzegovina": "波斯尼亚和黑塞哥维那",
        Botswana: "博茨瓦纳",
        Brazil: "巴西",
        Brunei: "文莱",
        Bulgaria: "保加利亚",
        "Burkina Faso": "布基纳法索",
        Burundi: "布隆迪",
        Cambodia: "柬埔寨",
        Cameroon: "喀麦隆",
        Canada: "加拿大",
        "Cape Verde": "佛得角",
        "Central African Republic": "中非共和国",
        Chad: "乍得",
        Chile: "智利",
        China: "中国",
        Colombia: "哥伦比亚",
        Comoros: "科摩罗",
        "Republic of the Congo": "刚果共和国",
        "Costa Rica": "哥斯达黎加",
        Croatia: "克罗地亚",
        Cuba: "古巴",
        Cyprus: "塞浦路斯",
        "Czech Republic": "捷克共和国",
        Denmark: "丹麦",
        Djibouti: "吉布提",
        Dominica: "多米尼加",
        "Dominican Republic": "多明尼加共和国",
        Ecuador: "厄瓜多尔",
        Egypt: "埃及",
        "El Salvador": "萨尔瓦多",
        "Equatorial Guinea": "赤道几内亚",
        Eritrea: "厄立特里亚",
        Estonia: "爱沙尼亚",
        Ethiopia: "埃塞俄比亚",
        "Falkland Islands": "福克兰群岛",
        "Faroe Islands": "法罗群岛",
        Fiji: "斐济",
        Finland: "芬兰",
        France: "法国",
        "French Guiana": "法属圭亚那",
        "French Southern and Antarctic Lands": "法属南半球和南极领地",
        Gabon: "加蓬",
        Gambia: "冈比亚",
        "Gaza Strip": "加沙",
        Georgia: "格鲁吉亚",
        Germany: "德国",
        Ghana: "加纳",
        Greece: "希腊",
        Greenland: "格陵兰",
        Grenada: "格林纳达",
        Guadeloupe: "瓜德罗普",
        Guatemala: "危地马拉",
        Guinea: "几内亚",
        "Guinea Bissau": "几内亚比绍",
        Guyana: "圭亚那",
        Haiti: "海地",
        Honduras: "洪都拉斯",
        "Hong Kong": "香港",
        Hungary: "匈牙利",
        Iceland: "冰岛",
        India: "印度",
        Indonesia: "印尼",
        Iran: "伊朗",
        Iraq: "伊拉克",
        "Iraq-Saudi Arabia Neutral Zone": "伊拉克阿拉伯中立区",
        Ireland: "爱尔兰",
        "Isle of Man": "马恩岛",
        Israel: "以色列",
        Italy: "意大利",
        "Ivory Coast": "科特迪瓦",
        Jamaica: "牙买加",
        "Jan Mayen": "扬马延岛",
        Japan: "日本",
        Jordan: "约旦",
        Kazakhstan: "哈萨克斯坦",
        Kenya: "肯尼亚",
        Kerguelen: "凯尔盖朗群岛",
        Kiribati: "基里巴斯",
        "North Korea": "北朝鲜",
        "South Korea": "韩国",
        Kuwait: "科威特",
        Kyrgyzstan: "吉尔吉斯斯坦",
        Laos: "老挝",
        Latvia: "拉脱维亚",
        Lebanon: "黎巴嫩",
        Lesotho: "莱索托",
        Liberia: "利比里亚",
        Libya: "利比亚",
        Liechtenstein: "列支敦士登",
        Lithuania: "立陶宛",
        Luxembourg: "卢森堡",
        Macau: "澳门",
        Macedonia: "马其顿",
        Madagascar: "马达加斯加",
        Malawi: "马拉维",
        Malaysia: "马来西亚",
        Maldives: "马尔代夫",
        Mali: "马里",
        Malta: "马耳他",
        Martinique: "马提尼克",
        Mauritania: "毛里塔尼亚",
        Mauritius: "毛里求斯",
        Mexico: "墨西哥",
        Moldova: "摩尔多瓦",
        Monaco: "摩纳哥",
        Mongolia: "蒙古",
        Morocco: "摩洛哥",
        Mozambique: "莫桑比克",
        Myanmar: "缅甸",
        Namibia: "纳米比亚",
        Nepal: "尼泊尔",
        Netherlands: "荷兰",
        "New Caledonia": "新喀里多尼亚",
        "New Zealand": "新西兰",
        Nicaragua: "尼加拉瓜",
        Niger: "尼日尔",
        Nigeria: "尼日利亚",
        "Northern Mariana Islands": "北马里亚纳群岛",
        Norway: "挪威",
        Oman: "阿曼",
        Pakistan: "巴基斯坦",
        Panama: "巴拿马",
        "Papua New Guinea": "巴布亚新几内亚",
        Paraguay: "巴拉圭",
        Peru: "秘鲁",
        Philippines: "菲律宾",
        Poland: "波兰",
        Portugal: "葡萄牙",
        "Puerto Rico": "波多黎各",
        Qatar: "卡塔尔",
        Reunion: "留尼旺岛",
        Romania: "罗马尼亚",
        Russia: "俄罗斯",
        Rwanda: "卢旺达",
        "San Marino": "圣马力诺",
        "Sao Tome and Principe": "圣多美和普林西比",
        "Saudi Arabia": "沙特阿拉伯",
        Senegal: "塞内加尔",
        Seychelles: "塞舌尔",
        "Sierra Leone": "塞拉利昂",
        Singapore: "新加坡",
        Slovakia: "斯洛伐克",
        Slovenia: "斯洛文尼亚",
        "Solomon Islands": "所罗门群岛",
        Somalia: "索马里",
        "South Africa": "南非",
        Spain: "西班牙",
        "Sri Lanka": "斯里兰卡",
        "St. Christopher-Nevis": "圣",
        "St. Lucia": "圣露西亚",
        "St. Vincent and the Grenadines": "圣文森特和格林纳丁斯",
        Sudan: "苏丹",
        Suriname: "苏里南",
        Svalbard: "斯瓦尔巴特群岛",
        Swaziland: "斯威士兰",
        Sweden: "瑞典",
        Switzerland: "瑞士",
        Syria: "叙利亚",
        Taiwan: "台湾",
        Tajikistan: "塔吉克斯坦",
        "United Republic of Tanzania": "坦桑尼亚",
        Thailand: "泰国",
        Togo: "多哥",
        Tonga: "汤加",
        "Trinidad and Tobago": "特里尼达和多巴哥",
        Tunisia: "突尼斯",
        Turkey: "土耳其",
        Turkmenistan: "土库曼斯坦",
        "Turks and Caicos Islands": "特克斯和凯科斯群岛",
        Uganda: "乌干达",
        Ukraine: "乌克兰",
        "United Arab Emirates": "阿联酋",
        "United Kingdom": "英国",
        "United States of America": "美国",
        Uruguay: "乌拉圭",
        Uzbekistan: "乌兹别克斯坦",
        Vanuatu: "瓦努阿图",
        Venezuela: "委内瑞拉",
        Vietnam: "越南",
        "Western Sahara": "西撒哈拉",
        "Western Samoa": "西萨摩亚",
        Yemen: "也门",
        Yugoslavia: "南斯拉夫",
        "Democratic Republic of the Congo": "刚果民主共和国",
        Zambia: "赞比亚",
        Zimbabwe: "津巴布韦",
        "South Sudan": "南苏丹",
        Somaliland: "索马里兰",
        Montenegro: "黑山",
        Kosovo: "科索沃",
        "Republic of Serbia": "塞尔维亚",
      };

      option = {
        timeline: {
          axisType: "category",
          orient: "vertical",
          autoPlay: true,
          inverse: true,
          playInterval: 5000,
          left: null,
          right: -105,
          top: 20,
          bottom: 20,
          width: 46,
        },
        baseOption: {
          visualMap: {
            type: "piecewise", //分段型。
            splitNumber: 6,
            inverse: true,
            pieces: [
              {
                min: 0,
                max: 10,
                color: "#759aa0",
              },
              {
                min: 10,
                max: 20,
                color: "#73b9bc",
              },
              {
                min: 20,
                max: 40,
                color: "#8dc1a9",
              },
              {
                min: 40,
                max: 70,
                color: "#e69d87",
              },
              {
                min: 70,
                max: 140,
                color: "#ea7e53",
              },
              {
                min: 140,
                //max: 1000,
                color: "#dd6b66",
              },
            ],
            left: "left",
            top: "bottom",
            textStyle: {
              color: "#000",
            },
            //min: 0,
            //max: 60000,
            //text:['High','Low'],
            //realtime: true,
            //calculable: true,
            //color: ['red','orange','lightgreen']
          },
          series: [
            {
              type: "map",
              map: "world",
              // roam: true,
              itemStyle: {
                emphasis: { label: { show: false } },
              },
              nameMap: nameMap,
            },
          ],
        },

        options: [
          {
            tooltip: {
              trigger: "item",
              formatter: function (params) {
                var value = params.value;
                //value = value.toFixed(5);toFixed(3)控制小数位数
                value = value;
                if (!value) {
                  return;
                }
                //var abc=(params.abc);
                return params.name + " : " + value + " 百万美元/km²";
              },
            },
            series: {
              data: data,
            },
          },
        ],
      };
      option && myChart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
@keyframes img1 {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}
@keyframes img3 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.center {
  width: 50%;
  .ditu {
    width: 100%;
    height: 80%;
    .box {
      position: relative;
      .img3 {
        position: absolute;
        left: 165px;
        top: 10px;
        width: 590px;
        height: 590px;
        -webkit-animation: img3 15s;
        animation: img3 15s linear infinite;
      }
      .img2 {
        position: absolute;
        left: 232px;
        top: 80px;
        width: 470px;
        height: 470px;
      }
      #map {
        position: absolute;
        top: 80px;
        left: 33px;
        width: 870px;
        height: 470px;
      }
      .img1 {
        -webkit-animation: img1 10s;
        position: absolute;
        left: 10.729167vw;
        animation: img1 10s linear infinite;
        top: 3.041667vw;
        width: 520px;
        height: 520px;
      }
    }
    .list {
      width: 100%;
      box-sizing: border-box;
      height: 10%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-left: 100px;
      padding-right: 100px;
      cursor: pointer;

      p {
        width: 150px;
        height: 50px;
        background-color: rgba(101, 132, 226, 0.1);
        text-align: center;
        line-height: 50px;
        border-radius: 30px;
        font-size: 1.302vw;
        &:focus {
          color: yellow;
        }
      }
    }
  }
  height: 100%;
  //   background-color: bisque;
  .center-top {
    width: 100%;
    height: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #0a1b58;
    .centerlist {
      width: 95%;
      height: 90%;
      background-color: #0a1b58;
      display: flex;
      align-items: center;
      justify-content: space-around;
      justify-content: center;
      a {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        width: 23%;
        height: 80px;
        background-color: #0a1b58;
        text-decoration: none;
        text-align: center;

        p {
          width: 160px;
          height: 80px;
          border: 1px solid #3b4875;
          text-align: center;
          line-height: 80px;
          font-size: 30px;
          color: #ffeb7b;
        }
        span {
          font-size: 1.302vw;
          margin-top: 10px;
          color: hsla(0, 0%, 100%, 0.7);
        }
      }
    }
  }
}
</style>